<template>
    <div class="header-box">
      <h2>智能题库</h2>
      <div class="tiku">
          <span>全部</span>
          <span>考研</span>
          <span>化学</span>
          <span>职业考证</span>
          <span>教师资格</span>
          <span>兴趣技能</span>
          <span>逻辑英语</span>
          <span>四六级</span>
         
      </div>
    </div>
</template>

<script>
export default {
    name:"Header",
    data(){
        return{
           
        }
    }
}
</script>


<style>
.header-box{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.header-box h2{
    width: 95%;
    margin: auto;
    height: .8rem;
    line-height: .8rem;
}
.tiku{
    width: 95%;
    height: .6rem;
    margin:auto;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: center;
}
.tiku span{
    flex-shrink: 0;
    padding-right: .2rem;
    margin-right: .2rem;
    font-size: .18rem;
    color: #a3a3a3;
    border-right: 1px solid #a3a3a3;
}
.tiku span:hover{
    color: red;
    font-weight: 600;
}
</style>